<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="gauge2Chart"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";

const animationDuration = 2000;
export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			const newData = {
				value: 80,
				name: "当前学校总数",
				max: 100,
			};
			this.options = {
				title: [
					{
						text: newData.name,
						x: "50%",
						y: "55%",
						textAlign: "center",
						textStyle: {
							fontWeight: "normal",
							fontSize: "14",
							fontFamily: "SourceHanSansCN-Medium",
							color: "#ffffff",
						},
					},
					{
						text: newData.value,
						x: "49%",
						y: "40%",
						textAlign: "center",
						textStyle: {
							fontWeight: "normal",
							fontSize: "40",
							fontFamily: "SourceHanSansCN-Medium",
							color: "#66FFFF",
						},
					},
				],
				angleAxis: {
					show: false,

					max: (newData.max * 360) / 270, //-45度到225度，二者偏移值是270度除360度

					type: "value",

					startAngle: 225, //极坐标初始角度

					splitLine: {
						show: false,
					},
				},

				barMaxWidth: 18, //圆环宽度

				radiusAxis: {
					show: false,

					type: "category",
				},

				//圆环位置和大小

				polar: {
					center: ["50%", "50%"],

					radius: "100%",
				},
				series: [
					// 最外层圆环形
					{
						type: "gauge",
						radius: "92%", // 1行3个
						center: ["50%", "50%"],
						splitNumber: 10,
						// min: 0,
						max: 100,

						startAngle: 225,
						endAngle: -45,
						z: 99,

						// 线
						axisLine: {
							lineStyle: {
								width: 1,
								color: [[1, "rgba(255,255,255,0)"]],
							},
							detail: {
								formatter: "{value}",
							},
							data: [
								{
									value: 50,
									name: "SCORE",
								},
							],
						},
						// //刻度标签。
						axisTick: {
							show: true,
							splitNumber: 5, //刻度的段落数
							lineStyle: {
								color: "#103781",
								width: 1, //刻度的宽度
							},
							length: 25, //刻度的长度
						},
						splitLine: {
							//文字和刻度的偏移量
							show: false,
						},
						//刻度线文字
						axisLabel: {
							show: false,
						},
						pointer: {
							show: false,
						},

						title: {
							// 仪表盘标题。
							show: false,
						},
					},
					// 第二层带分界线圆环
					{
						type: "gauge",
						radius: "75%", // 1行3个
						center: ["50%", "50%"],
						splitNumber: 10,
						// min: 0,
						max: 100,

						startAngle: 225,
						endAngle: -45,
						z: 99,

						// 线
						axisLine: {
							lineStyle: {
								width: 1,
								color: [[1, "rgba(255,255,255,0)"]],
							},
							detail: {
								formatter: "{value}",
							},
							data: [
								{
									value: 50,
									name: "SCORE",
								},
							],
						},
						// //刻度标签。
						axisTick: {
							show: true,
							splitNumber: 5, //刻度的段落数
							lineStyle: {
								color: "#103781",
								width: 2, //刻度的宽度
								shadowColor: "#67FFFC",
								shadowBlur: 1,
							},
							length: 4, //刻度的长度
						},
						splitLine: {
							//文字和刻度的偏移量
							show: true,
							length: -15, //长度
							distance: 11,
							lineStyle: {
								color: "#66FFFF",
								width: 3,
							},
						},
						// 刻度线文字
						axisLabel: {
							show: false,
							// color: "#ddd",
							// fontSize: 10,
							// distance: 10,
						},
						data: [
							{
								value: newData.value,
								name: "SCORE",
								itemStyle: {
									color: "#103781",
								},
							},
						],
						pointer: {
							show: false,
							length: "12%",
							radius: "50%",
							width: 10, //指针粗细
							offsetCenter: [0, -273],
						},
						detail: {
							show: false,
						},
						title: {
							// 仪表盘标题。
							show: false,
						},
					},
					{
						type: "bar",

						data: [
							{
								//上层圆环，显示数据

								value: newData.value,

								// itemStyle: {
								// 	// color: "#1598FF",
								// },
							},
						],
						itemStyle: {
							borderRadius: "50%",

							opacity: 1,
							color: {
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: "rgba(95, 186, 255, 0.2)", // 0% 处的颜色
									},
									{
										offset: 1,
										color: "rgba(13, 86, 234, 1)", // 100% 处的颜色
									},
								],
								global: false, // 缺省为 false
							},
						},
						barGap: "-100%", //柱间距离,上下两层圆环重合

						coordinateSystem: "polar",

						roundCap: true, //顶端圆角

						z: 3, //圆环层级，同zindex
					},
					{
						//下层圆环，显示最大值

						type: "bar",

						data: [
							{
								value: newData.max,

								itemStyle: {
									color: "#1598FF",

									opacity: 0.2,

									borderWidth: 0,
								},
							},
						],

						barGap: "-100%",

						coordinateSystem: "polar",

						roundCap: true,

						z: 1,
					},
				],
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
